import {
  Form,
  Input,
  Select,
} from 'antd'
import { useCallback } from 'react';
import { useRequest } from 'ahooks';
import { getProjectCategoryApi } from '@/api/pro';

const { Option } = Select;
const { Search } = Input
const FormFilter = (props) => {
  const { filter, setFilter } = props
  const [form] = Form.useForm()
  const { data: categorys } = useRequest(getProjectCategoryApi)

  const handleSearch = useCallback((value) => {
    setFilter({ ...filter, search: value })
  }, [filter])
  const hangdleCategory = useCallback((value = '') => {
    setFilter({ ...filter, category: value })
  }, [filter])

  return (
    <Form form={form} layout="inline">
      <Form.Item name="search" label="搜索">
        <Search value={filter.search} enterButton placeholder="名称" onSearch={handleSearch} />
      </Form.Item>
      <Form.Item name="分类" label="分类">
        <Select allowClear value={filter.category} style={{ width: 120 }} onChange={hangdleCategory}>
          { categorys?.map((item) => (<Option value={item} key={item}>{item}</Option>)) }
        </Select>
      </Form.Item>
    </Form>
  )
}
export default FormFilter
